<template>
  <div class="time-period">
    <div class="time-name">
      <el-date-picker
        v-model="inputDate"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-button tags="button" type="primary" @click="getDate">查询</el-button>
    </div>

  </div>
</template>

<script>
  export default {
    name: "TimePeriod",
    mounted() {
      this.inputDate = this.timeDefault;
      this.getDate();
    },
    computed: {
      timeDefault() {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        return [start, end];
      }
    },
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        inputDate: []
      };
    },
    methods: {
      getDate() {
        this.$store.commit('SET_DATE', this.inputDate);
      }
    }
  }
</script>

<style scoped>
  .time-name {
    padding: 20px;
  }

  .time-name button {
    margin-left: 20px;
  }

  .time-period {
    display: flex;
    flex-direction: row-reverse;
    height: 80px;
  }
</style>
